import React, { PureComponent } from 'react';
import { checkPaper } from '@/services/studentExam'
import styles from './index.less';
import { Col, Row, Card, Button, Checkbox, Radio, message, } from 'antd';
import QuestionButtons from './QuestionButtons'
import { history } from 'umi';
import { fileurl } from '@/services/baseurl'
import {stopActive} from '@/utils/utils'
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
export default class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        stopActive()
        this.state = {
            single: [],
            batch: [],
            judge: [],
            info: {},
            deadline: 0,
            currentSingleIndex: 0,
            currentBatchIndex: -1,
            currentJudgeIndex: -1,
            currentQuestion: {},
            singleAnswerValue: null,
            batchAnswerValue: [],
            judgeAnswerValue: null,
            singleIds: [],
            batchIds: [],
            judgeIds: [],
        }
    }
    changeCurrentQuestion = (index: number, type: string, currentQuestion: any) => {
        this.setState({
            [type]: index,
            currentQuestion,
        })
        if (type === 'currentSingleIndex') {
            this.setState({
                currentBatchIndex: -1,
                currentJudgeIndex: -1,
            })
        }
        if (type === 'currentBatchIndex') {
            this.setState({
                currentSingleIndex: -1,
                currentJudgeIndex: -1,
            })
        }
        if (type === 'currentJudgeIndex') {
            this.setState({
                currentSingleIndex: -1,
                currentBatchIndex: -1,
            })
        }
    }
    prevQuestion = (obj: string) => () => {
        const {
            single,
            batch,
            judge,
        } = this.state;
        let questionIndex = this.state[obj];
        questionIndex = questionIndex - 1;
        if (obj === "currentSingleIndex") {
            if (questionIndex < 0) return message.warn("已经是第一题了");
            this.setState({
                currentSingleIndex: questionIndex,
                currentQuestion: single[questionIndex],
            });
        }
        if (obj === "currentJudgeIndex") {
            if (questionIndex < 0) {
                if (!single[0]) return message.warn("已经是第一题了");
                this.setState({
                    currentQuestion: single[single.length - 1],
                    currentSingleIndex: single.length - 1,
                    currentJudgeIndex: -1,
                });
                return;
            }
            this.setState({
                currentJudgeIndex: questionIndex,
                currentQuestion: judge[questionIndex],
            });
        }
        if (obj === "currentBatchIndex") {
            if (!single[0] && !batch[0]) return message.warn("已经是第一题了");
            if (questionIndex < 0) {
                if (judge[0]) {
                    return this.setState({
                        currentQuestion: judge[judge.length - 1],
                        currentJudgeIndex: judge.length - 1,
                        currentBatchIndex: -1,
                    });
                }
                if (single[0]) {
                    return this.setState({
                        currentQuestion: single[single.length - 1],
                        currentSingleIndex: single.length - 1,
                        currentBatchIndex: -1,
                    });
                }
                this.setState({
                    currentQuestion: judge[judge.length - 1],
                    currentJudgeIndex: judge.length - 1,
                    currentBatchIndex: -1,
                });
            }
            this.setState({
                currentBatchIndex: questionIndex,
                currentQuestion: batch[questionIndex],
            });
        }
    };
    nextQuestion = (obj: string) => () => {
        const {
            single,
            batch,
            judge,
        } = this.state;
        let questionIndex = this.state[obj];
        questionIndex = questionIndex + 1;
        if (obj === "currentSingleIndex") {
            if (questionIndex >= single.length) {
                if (!judge[0] && !batch[0]) return message.warn("已经是最后一题了");
                if (judge[0]) {
                    return this.setState({
                        currentJudgeIndex: 0,
                        currentQuestion: judge[0],
                        currentSingleIndex: -1,
                    });
                }
                if (batch[0]) {
                    return this.setState({
                        currentBatchIndex: 0,
                        currentQuestion: batch[0],
                        currentSingleIndex: -1,
                    });
                }
                return;
            }
            this.setState({
                currentSingleIndex: questionIndex,
                currentQuestion: single[questionIndex],
            });
        }
        if (obj === "currentJudgeIndex") {
            if (questionIndex >= judge.length) {
                if (!batch[0]) return message.warn("已经是最后一题了");
                this.setState({
                    currentBatchIndex: 0,
                    currentQuestion: batch[0],
                    currentJudgeIndex: -1,
                });
                return;
            }
            this.setState({
                currentJudgeIndex: questionIndex,
                currentQuestion: judge[questionIndex],
            });
        }
        if (obj === "currentBatchIndex") {
            if (questionIndex >= batch.length)
                return message.warn("已经是最后一题了");
            this.setState({
                currentBatchIndex: questionIndex,
                currentQuestion: batch[questionIndex],
            });
        }
    };
    componentDidMount() {
        const uid = localStorage.getItem('id');
        if (!uid) {
            message.error('请先登录')
            this.props.history.push('/login')
            return
        }
        document.body.style.background = '#f0f0f0'
        const id = this.props.match.params.id;
        const { singleIds, batchIds, judgeIds } = this.state;
        const wrong = this.props.location.query.wrong * 1;
        checkPaper({ uid, pid: id }).then(res => {
            let single = [];
            let batch = [];
            let judge = [];
            let singleScore = 0;
            let batchScore = 0;
            let judgeScore = 0;
            if (wrong === 1) {
                for (const key in res) {
                    const item = res[key];
                    if (key !== 'test') {
                        if (item.type === 1&&item.answer!==item.answer_user&&item.answer_user) {
                            single.push(item)
                        }
                        if (item.type === 2&&item.answer!==item.answer_user&&item.answer_user) {
                            batch.push(item)
                        }
                        if (item.type === 3&&item.answer!==item.answer_user&&item.answer_user) {
                            judge.push(item)
                        }
                    }
                }
            } else {
                for (const key in res) {
                    const item = res[key];
                    if (key !== 'test') {
                        if (item.type === 1) {
                            single.push(item)
                            if (String(item.answer).trim() === item.answer_user) {
                                singleScore++
                            }
                        }
                        if (item.type === 2) {
                            batch.push(item)
                            if (String(item.answer).trim() === item.answer_user) {
                                batchScore++
                            }
                        }
                        if (item.type === 3) {
                            judge.push(item)
                            if (String(item.answer).trim() === item.answer_user) {
                                judgeScore++
                            }
                        }
                        this.setState({
                            singleScore,
                            batchScore,
                            judgeScore
                        })
                    }
                }
            }
            this.setState({
                info: res.test || {},
                single,
                batch,
                judge,
                currentQuestion: single[0]||judge[0]||batch[0]
            })
        })

    }
    render() {
        const { single, batch, judge, info, currentQuestion, currentSingleIndex,
            currentBatchIndex, currentJudgeIndex,
        } = this.state;
        const name = localStorage.getItem('name');
        const id_number = localStorage.getItem('id_number');
        const exam_page = localStorage.getItem('exam_page')
        return (
            <React.Fragment >
                <div className={styles['header']}>
                    <img className={styles['picture']} src="Https://www.shejiyuan.com/Public/images/exam_avatar.png" alt="" />
                    <b>考生姓名：</b>{name} <b>考生考号：</b>  {id_number}<b>考试科目：</b>{info.name}
                    <div className={styles['header-right']}>

                    </div>
                </div>
                <Row gutter={10}>
                    <Col span={5}>
                        <Card style={{ margin: '25px 0 25px 25px', height: '80vh', overflowY: 'auto' }}>

                            <h4> 一、单选题    (共<b>{single.length}</b>题,每题<b>{info.multiple_score}</b>分,说明:选择一项正确的答案)</h4>
                            <QuestionButtons onClick={this.changeCurrentQuestion} currentIndex={currentSingleIndex} type="currentSingleIndex" data={single} />
                            <h4> 二、判断   (共<b>{judge.length}</b>题,每题<b>{info.judge_score}</b>分,说明:选择一项正确的答案)</h4>
                            <QuestionButtons onClick={this.changeCurrentQuestion} currentIndex={currentJudgeIndex} type="currentJudgeIndex" data={judge} />
                            <h4> 三、多选题    (共<b>{batch.length}</b>题,每题<b>{info.choices_score}</b>分,说明:选择一项正确的答案)</h4>
                            <QuestionButtons onClick={this.changeCurrentQuestion} currentIndex={currentBatchIndex} type="currentBatchIndex" data={batch} />

                            <Row gutter={10} className={styles['tips']}>
                                <Col span={4}><div className={styles['tips-item4']}>答对</div></Col>
                                <Col span={4}><div className={styles['tips-item2']}>答错</div></Col>
                                <Col span={4}><div className={styles['tips-item1']}>未答</div></Col>
                            </Row>
                        </Card>

                    </Col>
                    <Col span={19}>
                        <Card style={{ margin: '25px 25px 25px 0px', height: '80vh', overflowY: 'auto', userSelect: 'none' }}>

                            {
                                currentQuestion && currentQuestion.type === 1 &&
                                (
                                    <React.Fragment>
                                        <h3>单选题</h3>
                                        <p className={styles['question-content']}>
                                            {currentSingleIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentSingleIndex.img && <img src={fileurl + currentSingleIndex.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <RadioGroup value={currentQuestion.answer_user} >
                                            {currentQuestion.a && <div className={styles['question-answer-item']}><Radio key="A" value="A">A.{currentQuestion.a}</Radio></div>}
                                            {currentQuestion.b && <div className={styles['question-answer-item']}><Radio key="B" value="B">B.{currentQuestion.b}</Radio></div>}
                                            {currentQuestion.c && <div className={styles['question-answer-item']}><Radio key="C" value="C">C.{currentQuestion.c}</Radio></div>}
                                            {currentQuestion.d && <div className={styles['question-answer-item']}><Radio key="D" value="D">D.{currentQuestion.d}</Radio></div>}
                                            {currentQuestion.e && <div className={styles['question-answer-item']}><Radio key="E" value="E">E.{currentQuestion.e}</Radio></div>}
                                            {currentQuestion.f && <div className={styles['question-answer-item']}><Radio key="F" value="F">F.{currentQuestion.f}</Radio></div>}
                                        </RadioGroup>
                                        <div className={styles['answer-area']}>
                                            <p>正确答案：{currentQuestion.answer}</p>
                                            {
                                                currentQuestion.answer_that && <p>答案解析：{currentQuestion.answer_that}</p>
                                            }
                                        </div>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentSingleIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentSingleIndex')}>下一题</Button>
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            {
                                currentQuestion && currentQuestion.type === 2 && (
                                    <React.Fragment>
                                        <h3>多选题</h3>
                                        <p className={styles['question-content']}>
                                            {currentBatchIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentSingleIndex.img && <img src={fileurl + currentSingleIndex.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <CheckboxGroup value={currentQuestion.answer_user} >
                                            {currentQuestion.a && <div className={styles['question-answer-item']}><Checkbox key="A" value="A">A.{currentQuestion.a}</Checkbox></div>}
                                            {currentQuestion.b && <div className={styles['question-answer-item']}><Checkbox key="B" value="B">B.{currentQuestion.b}</Checkbox></div>}
                                            {currentQuestion.c && <div className={styles['question-answer-item']}><Checkbox key="C" value="C">C.{currentQuestion.c}</Checkbox></div>}
                                            {currentQuestion.d && <div className={styles['question-answer-item']}><Checkbox key="D" value="D">D.{currentQuestion.d}</Checkbox></div>}
                                            {currentQuestion.e && <div className={styles['question-answer-item']}><Checkbox key="E" value="E">E.{currentQuestion.e}</Checkbox></div>}
                                            {currentQuestion.f && <div className={styles['question-answer-item']}><Checkbox key="F" value="F">F.{currentQuestion.f}</Checkbox></div>}
                                        </CheckboxGroup>
                                        <div className={styles['answer-area']}>
                                            <p>正确答案：{currentQuestion.answer}</p>
                                            {
                                                currentQuestion.answer_that && <p>答案解析：{currentQuestion.answer_that}</p>
                                            }
                                        </div>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentBatchIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentBatchIndex')}>下一题</Button>
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            {
                                currentQuestion && currentQuestion.type === 3 && (
                                    <React.Fragment>
                                        <h3>判断题</h3>
                                        <p className={styles['question-content']}>
                                            {currentJudgeIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentSingleIndex.img && <img src={fileurl + currentSingleIndex.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <RadioGroup value={currentQuestion.answer_user}>
                                            <div className={styles['question-answer-item']}><Radio key="正确" value="正确">正确</Radio></div>
                                            <div className={styles['question-answer-item']}> <Radio key="错误" value="错误">错误</Radio></div>
                                        </RadioGroup>
                                        <div className={styles['answer-area']}>
                                            <p>正确答案：{currentQuestion.answer}</p>
                                            {
                                                currentQuestion.answer_that && <p>答案解析：{currentQuestion.answer_that}</p>
                                            }
                                        </div>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentJudgeIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentJudgeIndex')}>下一题</Button>
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            <Button type="primary" className={styles['submit-button']} danger onClick={() => this.props.history.push(exam_page)}>退出</Button>

                        </Card>
                    </Col>
                </Row>
            </React.Fragment>
        );
    }
}

